<template>

  <el-card>
    <el-form label-width="80px">
      <el-form-item label="品牌名">
        <el-input placeholder="请输入品牌名称" v-model="brand.name"></el-input>
      </el-form-item>

      <el-form-item v-model="brand.imgUrl" label="图片">
        <el-upload style="float: left"
                   :action= "'http://localhost:19283/v1/upload'"
                   name="file"
                   :limit="1"
                   list-type="picture-card"
                   :on-success="handleSuccess"
                   :on-preview="handlePictureCardPreview"
                   :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="post()">{{ brand.id == null ? '发布' : '修改' }}</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: "CarPostView",
  data() {
    return {
      brand: {},
      dialogImageUrl: '',
      dialogVisible: false,
      typeArr: [],
      brandArr: [],
      cityArr: []
    }
  },
  methods: {
    post() {
     //let user = localStorage.user ? JSON.parse(localStorage.user) : null;
     // if (user == null) {
     //   alert("请先登录!");
      //  this.$router.push('/login');
       // return;
      //}
      //将c对象转成查询字符串模式
      let data = this.qs.stringify(this.brand);
      //发送请求,把文章的数据提交到服务器
      this.axios.post("http://localhost:19282/brand/add-new", data)
          .then((response) => {
            if (response.data.state == 20000) {
              if (this.brand.id == null) {
                this.$message.success("发布成功!");
                //跳转到稿件管理页面
                this.$router.push('/admin/brand')
              } else {
                this.$message.success("修改成功!");
                //跳回到后台管理页面
                this.$router.push('/admin/brand');
              }

            } else {
              this.$message.warning(response.data.message);
            }
          })
    },
    handleSuccess(response, file, fileList) {
      this.brand.imgUrl = response.data;

    },
    handleRemove(file, fileList) {
      this.c.imgUrl = null;

      this.axios.post("http://localhost:19283/v1/remove?url=" + file.response.data)
          .then((response) => {
            if (response.data.state == 20000) {
              this.$message.success("删除完成!");
            }
          })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  mounted() {
    if (location.search.includes('id')) {//修改功能
      let id = new URLSearchParams(location.search).get('id');
      //通过id查询文章详情数据
      this.axios.get("http://localhost:19481/brand/" + id)
          .then((response) => {
            if (response.data.state == 20000) {
              this.brand = response.data.data;
            }
          })
    }
  }
}
</script>

<style scoped>

</style>